<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <div
            style="display: inline-block;font-size: 20px;font-weight: bold; height: 40px; line-height: 40px"
          >商品列表</div>
        </el-col>
        <el-col :span="8">
          <el-input
            placeholder="请输入要查询的内容"
            v-model="inputVal"
            clearable
            blur="search"
            style="width: 90%"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <template>
        <el-table :data="items.filter(data => !inputVal || data.code.toLowerCase().includes(inputVal.toLowerCase()) || data.name.toLowerCase().includes(inputVal.toLowerCase()))" style="width: 100%">
          <el-table-column prop="code" label="编码"></el-table-column>
          <el-table-column prop="name" label="名字"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="entryDt" label="添加时间"></el-table-column>
          <el-table-column prop="updateDt" label="更新时间"></el-table-column>
        </el-table>
      </template>
      <template>
        <div class="block">
          <el-pagination
            @size-change="sizechange"
            @current-change="pagechange"
            @prev-click="prepage"
            @next-click="nextpage"
            :current-page="page"
            :page-sizes="[1, 2, 3, 4]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalElements"
          ></el-pagination>
        </div>
      </template>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "productItem",
  data: function() {
    return {
      items: [],
      page: 1,
      size: 1,
      inputVal: "",
      totalElements: 1,
      options: [
        {
          text: "1条/页",
          value: "1"
        },
        {
          text: "2条/页",
          value: "2"
        },
        {
          text: "3条/页",
          value: "3"
        },
        {
          text: "4条/页",
          value: "4"
        }
      ]
    };
  },
  created: function() {
    this.request();
  },
  methods: {
    request() {
      this.$http.defaults.headers.common["X-Auth-Token"] =
        "b3fd13f6-37e8-49d6-a297-51eb7dbebead";
      this.$http.defaults.headers.post["Content-Type"] = "application/json";
      this.$http
        .post("http://test.skm.cnscoo.cc/web/v1/sku", {
          page: this.page,
          size: this.size
        })
        .then(response => {
          if (response.data.message === "success") {
            console.log(response.data);
            this.items = response.data.content.content.map(item => {
              item.entryDt = this.formatTime(item.entryDt);
              item.updateDt = this.formatTime(item.updateDt);
              return item;
            });
            this.totalElements = response.data.content.totalElements;
          } else {
            alert("请求出错");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    formatTime(time) {
      return new Date(+new Date(time) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    sizechange(val) {
      this.size = val;
      this.page = 1;
      this.active = 1;
      this.request();
    },
    pagechange(val) {
      this.page = val;
      console.log("this.page = " + this.page);
      this.request();
    },
    prepage() {
      if (this.page > 1 && this.page <= this.pages) {
        this.page--;
        this.request();
      }
    },
    nextpage() {
      if (this.page >= 1 && this.page < this.pages) {
        this.page++;
        console.log("this.active is " + this.active);
        this.request();
      }
    }
  }
};
</script>